import React, { FC, useState } from 'react'
import Taro, { useRouter, useDidShow } from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
import api from '@/services/config/index'

import './index.scss'

interface DisputeList {
  // 标题
  title: string
  imagePath: Array<{
    imagePath: string
  }>
  updateAt: ''
  // 纠纷列表
  disputeList: Array<{
    avatarUrl: string
    name: string
    createAt: string
    description: string
    imagePath: Array<{
      imagePath: string
    }>
    disputeId: string
  }>
}
const DisputeList: FC = () => {
  const [dispute, setDispute] = useState<DisputeList>({
    title: '',
    imagePath: [
      {
        imagePath: ''
      }
    ],
    updateAt: '',
    disputeList: [
      {
        avatarUrl: '',
        name: '',
        createAt: '',
        description: '',
        imagePath: [
          {
            imagePath: ''
          }
        ],
        disputeId: ''
      }
    ]
  })
  const { params } = useRouter()
  useDidShow(() => {
    api['orderList/getDisputeDetail']({ orderId: params.orderId }).then((res) => {
      setDispute(res.data[0])
    })
  })

  return (
    <View className='disputeList iphonex-safe-dis grey-bgc page-height'>
      {/* 商品信息 */}
      <View className='disputeList-goods flex white-bgc'>
        <Image src={dispute.imagePath[0].imagePath} className='disputeList-goods__img'></Image>
        <View className='disputeList-goods__main'>
          <View className='font32'>{dispute.title}</View>
          <View className='font24 grey-color'>交易成功时间：{dispute.updateAt}</View>
        </View>
      </View>

      {/* 纠纷留言 */}
      <View>
        {dispute.disputeList.map((item) => {
          return (
            <View className='disputeList-list white-bgc' key={item.disputeId}>
              <View className='disputeList-list__user  flex'>
                <Image src={item.avatarUrl} className='disputeList-list__user-avatar'></Image>
                <View className='disputeList-list__user-info'>
                  <View className='font28'>{item.name}</View>
                  <View className='font24 grey-color'>{item.createAt}</View>
                </View>
              </View>
              <View className='disputeList-list__desc'>{item.description}</View>
              <Image
                className='disputeList-list__imagePath'
                src={item.imagePath[0].imagePath}
                onClick={() => {
                  Taro.previewImage({
                    current: item.imagePath[0].imagePath,
                    urls: [item.imagePath[0].imagePath] // 需要预览的图片http链接列表
                  })
                }}
              ></Image>
            </View>
          )
        })}
      </View>
      <Button
        className='commmon-btn'
        onClick={() => {
          Taro.navigateTo({ url: '/pages/OrderList/PubDisputes/index?orderId=' + params.orderId })
        }}
      >
        追加纠纷
      </Button>
    </View>
  )
}

export default DisputeList
